<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-size: cover;
        background-position: center;
        transition: 0.5s;
      }
      body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: -1;
      }
      .slide-container {
        position: relative;
        width: 70vw;
        height: 70vh;
        overflow: hidden;
      }
      .slide {
        opacity: 0;
        position: absolute;
        top: -15vh;
        left: -15vw;
        width: 100vw;
        height: 100vh;
        background-size: cover;
        background-position: center;
        border: solid;
        z-index: 1;
        transition: .5s;
      }
      .active {
        opacity: 1;
      }
      .arrow {
        position: fixed;
        background-color: transparent;
        padding: 20px;
        font-size: 30px;
        border: 1px solid black;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
      .arrow-left {
        left: calc(15vw - 70px);
      }
      .arrow-right {
        right: calc(15vw - 70px);
      }
      ul {
        position: fixed;
        display: flex;
        bottom: 30px;
      }
      ul li {
        list-style: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4);
        margin: 10px;
      }
      .liActive {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <div
        class="slide active"
        style="
          background-image: url(https://t7.baidu.com/it/u=2033987856,334685263&fm=193&f=GIF);
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url(https://t7.baidu.com/it/u=832449998,3859178369&fm=193&f=GIF);
        "
      ></div>
      <div
        class="slide"
        style="background-image: url(https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://t7.baidu.com/it/u=1517419723,1472324058&fm=193&f=GIF)"
      ></div>
      <div
        class="slide"
        style="background-image: url(https://t7.baidu.com/it/u=938651884,1522785317&fm=193&f=GIF)"
      ></div>
      <button class="arrow arrow-left">⬅️</button>
      <button class="arrow arrow-right">➡️</button>
    </div>
    <ul>
      <li class="liActive"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script>
      let bodyEl = document.querySelector('body');
      let slides = document.querySelectorAll('.slide');
      let left = document.querySelector('.arrow-left');
      let right = document.querySelector('.arrow-right');
      // 获取li
      let lis = document.querySelectorAll('li');
      // 记录当前图片
      let activeIndex = 0;
      // 点击切换下一张
      function moveNext() {
        // 点击索引加一
        activeIndex++;
        // 如果是最后一张就从第一张开始
        if (activeIndex == slides.length) {
          activeIndex = 0;
        }
        setActiveSlide();
        setBodySlide();
      }
      right.onclick = moveNext;
      // 自动切换
      function time(){
        timer=setInterval(()=>{
        moveNext()
      },1000)
      }
      time()
      // 点击切换上一张
      function movePrev() {
        activeIndex--;
        if (activeIndex < 0) {
          activeIndex = slides.length - 1;
        }
        setActiveSlide();
        setBodySlide();
      }
      left.onclick = movePrev;
      // 点击小圆点
      lis.forEach((li, index) => {
        li.onclick = function () {
          // 清除定时器
          clearInterval(timer)
          // 过2秒继续运行
          setTimeout(time,2000)
          // 把li的索引赋值给activeIndex
          activeIndex = index;
          setActiveSlide();
          setBodySlide();
        };
      });
      // 切换图片
      function setActiveSlide() {
        slides.forEach(ele => ele.classList.remove('active'));
        slides[activeIndex].classList.add('active');
        // 小圆点切换
        lis.forEach(ele => ele.classList.remove('liActive'));
        lis[activeIndex].classList.add('liActive');
      }
      // 切换body
      function setBodySlide() {
        bodyEl.style.backgroundImage =
          slides[activeIndex].style.backgroundImage;
      }
      setBodySlide();
    </script>
  </body>
</html>
